<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flowbite UI Designer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: {
                            100: '#374151',
                            200: '#1F2937',
                            300: '#111827',
                            400: '#030712'
                        },
                        light: {
                            100: '#F9FAFB',
                            200: '#F3F4F6',
                            300: '#E5E7EB'
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                        mono: ['Fira Code', 'monospace']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-thin {
                scrollbar-width: thin;
            }
            .scrollbar-thin::-webkit-scrollbar {
                width: 4px;
                height: 4px;
            }
            .scrollbar-thin::-webkit-scrollbar-thumb {
                background-color: rgba(255, 255, 255, 0.2);
                border-radius: 2px;
            }
            .component-hover {
                @apply transition-all duration-200 hover:bg-primary/10 hover:border-primary/50 cursor-move;
            }
            .panel-section {
                @apply border-b border-dark-100 py-3 px-4;
            }
            .property-item {
                @apply py-2 px-3 border-b border-dark-100 hover:bg-dark-200/50 transition-colors;
            }
        }
    </style>
</head>

<body class="font-inter bg-dark-400 text-light-100 h-screen flex flex-col overflow-hidden">
    <!-- 顶部导航栏 -->
    <header class="bg-dark-300 border-b border-dark-100 px-4 py-2 flex items-center justify-between z-10">
        <!-- 左侧Logo和菜单 -->
        <div class="flex items-center space-x-4">
            <div class="flex items-center space-x-2">
                <div class="bg-primary text-white p-1 rounded">
                    <i class="fa fa-paint-brush"></i>
                </div>
                <h1 class="text-lg font-semibold">Flowbite UI</h1>
            </div>
            <nav class="hidden md:flex space-x-6 text-sm">
                <a href="#" class="text-primary font-medium">Components</a>
                <a href="#" class="text-light-300 hover:text-light-100 transition-colors">Templates</a>
                <a href="#" class="text-light-300 hover:text-light-100 transition-colors">Documentation</a>
                <a href="#" class="text-light-300 hover:text-light-100 transition-colors">Pricing</a>
            </nav>
        </div>

        <!-- 右侧操作区 -->
        <div class="flex items-center space-x-3">
            <button class="bg-dark-200 hover:bg-dark-100 p-2 rounded-md transition-colors">
                <i class="fa fa-download text-light-300"></i>
            </button>
            <button class="bg-dark-200 hover:bg-dark-100 p-2 rounded-md transition-colors">
                <i class="fa fa-share-alt text-light-300"></i>
            </button>
            <button
                class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-md transition-colors text-sm font-medium flex items-center">
                <i class="fa fa-publish mr-2"></i> Publish
            </button>
            <div class="w-8 h-8 rounded-full bg-dark-100 overflow-hidden">
                <img src="https://picsum.photos/200/200?random=1" alt="User profile" class="w-full h-full object-cover">
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex flex-1 overflow-hidden">
        <!-- 左侧组件面板 -->
        <aside class="w-64 bg-dark-300 border-r border-dark-100 flex flex-col overflow-hidden">
            <!-- 搜索框 -->
            <div class="p-3 border-b border-dark-100">
                <div class="relative">
                    <input type="text" placeholder="Search components..."
                        class="w-full bg-dark-200 border border-dark-100 rounded-md py-2 pl-9 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-light-300"></i>
                </div>
            </div>

            <!-- 组件分类 -->
            <div class="overflow-y-auto scrollbar-thin flex-1">
                <!-- 分类1: Sections -->
                <div class="panel-section">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="font-medium text-sm text-light-300">Sections</h3>
                        <i class="fa fa-chevron-down text-xs text-light-300"></i>
                    </div>
                    <div class="space-y-2">
                        <div class="bg-dark-200 border border-dark-100 rounded-md p-2 component-hover">
                            <div class="text-xs text-light-300 mb-1">Hero Section</div>
                            <div class="h-16 bg-dark-300 rounded overflow-hidden">
                                <img src="https://picsum.photos/400/200?random=10" alt="Hero section preview"
                                    class="w-full h-full object-cover">
                            </div>
                        </div>
                        <div class="bg-dark-200 border border-dark-100 rounded-md p-2 component-hover">
                            <div class="text-xs text-light-300 mb-1">Feature Section</div>
                            <div class="h-16 bg-dark-300 rounded overflow-hidden">
                                <img src="https://picsum.photos/400/200?random=11" alt="Feature section preview"
                                    class="w-full h-full object-cover">
                            </div>
                        </div>
                        <div class="bg-dark-200 border border-dark-100 rounded-md p-2 component-hover">
                            <div class="text-xs text-light-300 mb-1">Editor Section</div>
                            <div class="h-16 bg-dark-300 rounded overflow-hidden">
                                <img src="https://picsum.photos/400/200?random=12" alt="Editor section preview"
                                    class="w-full h-full object-cover">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分类2: Frames -->
                <div class="panel-section">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="font-medium text-sm text-light-300">Frames</h3>
                        <i class="fa fa-chevron-down text-xs text-light-300"></i>
                    </div>
                    <div class="space-y-2">
                        <div class="bg-dark-200 border border-dark-100 rounded-md p-2 component-hover">
                            <div class="text-xs text-light-300 mb-1">Desktop Frame</div>
                            <div class="h-16 bg-dark-300 rounded overflow-hidden flex items-center justify-center">
                                <i class="fa fa-desktop text-2xl text-light-300"></i>
                            </div>
                        </div>
                        <div class="bg-dark-200 border border-dark-100 rounded-md p-2 component-hover">
                            <div class="text-xs text-light-300 mb-1">Tablet Frame</div>
                            <div class="h-16 bg-dark-300 rounded overflow-hidden flex items-center justify-center">
                                <i class="fa fa-tablet text-2xl text-light-300"></i>
                            </div>
                        </div>
                        <div class="bg-dark-200 border border-dark-100 rounded-md p-2 component-hover">
                            <div class="text-xs text-light-300 mb-1">Mobile Frame</div>
                            <div class="h-16 bg-dark-300 rounded overflow-hidden flex items-center justify-center">
                                <i class="fa fa-mobile text-2xl text-light-300"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分类3: Form Fields -->
                <div class="panel-section">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="font-medium text-sm text-light-300">Form Fields</h3>
                        <i class="fa fa-chevron-down text-xs text-light-300"></i>
                    </div>
                    <div class="space-y-2">
                        <div class="bg-dark-200 border border-dark-100 rounded-md p-2 component-hover">
                            <div class="text-xs text-light-300 mb-1">Text Input</div>
                            <div class="h-10 bg-dark-300 rounded flex items-center px-3">
                                <div class="w-full h-4 bg-dark-100 rounded-sm"></div>
                            </div>
                        </div>
                        <div class="bg-dark-200 border border-dark-100 rounded-md p-2 component-hover">
                            <div class="text-xs text-light-300 mb-1">Button</div>
                            <div class="h-10 bg-dark-300 rounded flex items-center justify-center">
                                <div class="w-20 h-6 bg-primary rounded-sm"></div>
                            </div>
                        </div>
                        <div class="bg-dark-200 border border-dark-100 rounded-md p-2 component-hover">
                            <div class="text-xs text-light-300 mb-1">Checkbox</div>
                            <div class="h-10 bg-dark-300 rounded flex items-center px-3">
                                <div class="w-5 h-5 bg-dark-100 rounded-sm border border-dark-100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 中央画布区域 -->
        <div class="flex-1 flex flex-col bg-dark-400 overflow-hidden">
            <!-- 画布工具栏 -->
            <div class="bg-dark-300 border-b border-dark-100 py-2 px-4 flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="flex space-x-1">
                        <button class="bg-dark-200 hover:bg-dark-100 p-1.5 rounded text-xs transition-colors">
                            <i class="fa fa-desktop"></i>
                        </button>
                        <button class="bg-dark-400 hover:bg-dark-100 p-1.5 rounded text-xs transition-colors">
                            <i class="fa fa-tablet"></i>
                        </button>
                        <button class="bg-dark-400 hover:bg-dark-100 p-1.5 rounded text-xs transition-colors">
                            <i class="fa fa-mobile"></i>
                        </button>
                    </div>
                    <div class="text-xs text-light-300">100% <i class="fa fa-chevron-down ml-1"></i></div>
                </div>
                <div class="flex items-center space-x-3">
                    <button class="bg-dark-200 hover:bg-dark-100 p-1.5 rounded text-xs transition-colors">
                        <i class="fa fa-undo"></i>
                    </button>
                    <button class="bg-dark-200 hover:bg-dark-100 p-1.5 rounded text-xs transition-colors">
                        <i class="fa fa-redo"></i>
                    </button>
                    <div class="h-4 w-px bg-dark-100"></div>
                    <button class="bg-dark-200 hover:bg-dark-100 p-1.5 rounded text-xs transition-colors">
                        <i class="fa fa-cog"></i>
                    </button>
                </div>
            </div>

            <!-- 画布内容区 - 修复了滚动问题 -->
            <div class="flex-1 overflow-auto scrollbar-thin">
                <!-- 使用内边距容器替代直接在滚动容器上设置内边距 -->
                <div class="p-8 flex items-start justify-center">
                    <!-- 画布网格背景 -->
                    <div
                        class="absolute inset-0 bg-[radial-gradient(rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[size:20px_20px]">
                    </div>

                    <!-- 模拟设备框架 - 桌面 -->
                    <div
                        class="w-full max-w-5xl bg-dark-300 rounded-lg shadow-2xl overflow-hidden border border-dark-100 relative mt-4 mb-8">
                        <!-- 设备顶部栏 -->
                        <div class="bg-dark-200 px-4 py-2 flex items-center justify-between border-b border-dark-100">
                            <div class="flex space-x-2">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <div class="text-xs text-light-300">Desktop Preview</div>
                            <div class="w-20"></div>
                        </div>

                        <!-- 设计画布 -->
                        <div id="canvas" class="min-h-[600px] bg-gradient-to-b from-dark-400 to-dark-300 p-8">
                            <!-- 已添加的Hero组件 -->
                            <div id="hero-section"
                                class="bg-gradient-to-r from-primary/20 to-secondary/20 rounded-xl p-8 mb-8 border-2 border-dashed border-transparent hover:border-primary/50 transition-colors cursor-pointer">
                                <div class="max-w-3xl mx-auto text-center">
                                    <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 text-light-100">Create
                                        amazing UIs with Flowbite</h2>
                                    <p class="text-xl text-light-300 mb-8">Build beautiful, responsive interfaces with
                                        our comprehensive UI component library.</p>
                                    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                                        <button
                                            class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors w-full sm:w-auto">Get
                                            Started</button>
                                        <button
                                            class="bg-dark-200 hover:bg-dark-100 text-light-100 font-medium py-3 px-6 rounded-lg transition-colors w-full sm:w-auto">View
                                            Components</button>
                                    </div>
                                </div>
                            </div>

                            <!-- 已添加的Feature组件 -->
                            <div id="feature-section"
                                class="bg-dark-200/50 rounded-xl p-8 mb-8 border-2 border-dashed border-transparent hover:border-primary/50 transition-colors cursor-pointer">
                                <h2 class="text-2xl font-bold mb-6 text-center text-light-100">Powerful Features</h2>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                    <div class="bg-dark-300 p-6 rounded-lg">
                                        <div
                                            class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                                            <i class="fa fa-code text-primary text-xl"></i>
                                        </div>
                                        <h3 class="text-lg font-semibold mb-2 text-light-100">Ready to Use</h3>
                                        <p class="text-light-300 text-sm">Components come with clean, production-ready
                                            code that's easy to integrate.</p>
                                    </div>
                                    <div class="bg-dark-300 p-6 rounded-lg">
                                        <div
                                            class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                                            <i class="fa fa-paint-brush text-primary text-xl"></i>
                                        </div>
                                        <h3 class="text-lg font-semibold mb-2 text-light-100">Customizable</h3>
                                        <p class="text-light-300 text-sm">Easily adjust colors, sizes, and styles to
                                            match your brand identity.</p>
                                    </div>
                                    <div class="bg-dark-300 p-6 rounded-lg">
                                        <div
                                            class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                                            <i class="fa fa-mobile text-primary text-xl"></i>
                                        </div>
                                        <h3 class="text-lg font-semibold mb-2 text-light-100">Responsive</h3>
                                        <p class="text-light-300 text-sm">Perfectly adapts to any screen size, from
                                            mobile to desktop.</p>
                                    </div>
                                </div>
                            </div>

                            <!-- 添加更多内容使滚动效果明显 -->
                            <div
                                class="bg-dark-200/30 rounded-xl p-8 mb-8 border-2 border-dashed border-transparent hover:border-primary/50 transition-colors">
                                <h2 class="text-2xl font-bold mb-4 text-light-100">Additional Content</h2>
                                <p class="text-light-300 mb-6">This section is added to demonstrate the scrolling
                                    functionality works correctly.</p>
                                <div class="h-64 bg-dark-300 rounded-lg flex items-center justify-center">
                                    <p class="text-light-300">More content area</p>
                                </div>
                            </div>

                            <div
                                class="bg-dark-200/30 rounded-xl p-8 mb-8 border-2 border-dashed border-transparent hover:border-primary/50 transition-colors">
                                <h2 class="text-2xl font-bold mb-4 text-light-100">Another Section</h2>
                                <p class="text-light-300 mb-6">Scroll to the top to see the fix works properly.</p>
                                <div class="h-40 bg-dark-300 rounded-lg flex items-center justify-center">
                                    <p class="text-light-300">Bottom content</p>
                                </div>
                            </div>

                            <!-- 可拖放区域提示 -->
                            <div
                                class="border-2 border-dashed border-dark-100 rounded-xl p-8 text-center text-light-300/50 hover:border-primary/30 hover:text-primary/50 transition-colors">
                                <i class="fa fa-plus-circle text-2xl mb-2"></i>
                                <p>Drop components here</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 代码预览区 -->
            <div class="bg-dark-300 border-t border-dark-100 h-64 flex flex-col">
                <div class="flex border-b border-dark-100">
                    <button class="px-4 py-2 text-sm font-medium text-primary border-b-2 border-primary">React</button>
                    <button
                        class="px-4 py-2 text-sm font-medium text-light-300 hover:bg-dark-200 transition-colors">HTML</button>
                    <button
                        class="px-4 py-2 text-sm font-medium text-light-300 hover:bg-dark-200 transition-colors">Vue</button>
                </div>
                <div class="flex-1 overflow-auto scrollbar-thin p-4">
                    <pre class="text-xs md:text-sm font-mono text-light-300 leading-relaxed"><code>import React from 'react';

const HeroSection = () => {
  return (
    &lt;div className="bg-gradient-to-r from-primary/20 to-secondary/20 rounded-xl p-8 mb-8"&gt;
      &lt;div className="max-w-3xl mx-auto text-center"&gt;
        &lt;h2 className="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4"&gt;
          Create amazing UIs with Flowbite
        &lt;/h2&gt;
        &lt;p className="text-xl mb-8"&gt;
          Build beautiful, responsive interfaces with our comprehensive UI component library.
        &lt;/p&gt;
        &lt;div className="flex flex-col sm:flex-row items-center justify-center gap-4"&gt;
          &lt;button className="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors w-full sm:w-auto"&gt;
            Get Started
          &lt;/button&gt;
          &lt;button className="bg-dark-200 hover:bg-dark-100 text-light-100 font-medium py-3 px-6 rounded-lg transition-colors w-full sm:w-auto"&gt;
            View Components
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
};

export default HeroSection;</code></pre>
                </div>
            </div>
        </div>

        <!-- 右侧属性面板 -->
        <aside class="w-72 bg-dark-300 border-l border-dark-100 flex flex-col overflow-hidden">
            <!-- 选中元素信息 -->
            <div class="p-3 border-b border-dark-100 bg-dark-200/50">
                <h3 class="font-medium text-sm">Hero Section</h3>
                <p class="text-xs text-light-300">Section / Container</p>
            </div>

            <!-- 属性编辑区 -->
            <div class="overflow-y-auto scrollbar-thin flex-1">
                <!-- 布局属性 -->
                <div class="panel-section">
                    <h3 class="font-medium text-sm text-light-300 mb-3">Layout</h3>

                    <div class="property-item">
                        <label class="text-xs text-light-300 block mb-1">Direction</label>
                        <select
                            class="w-full bg-dark-200 border border-dark-100 rounded-md py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                            <option>Column</option>
                            <option>Row</option>
                            <option>Row Reverse</option>
                            <option>Column Reverse</option>
                        </select>
                    </div>

                    <div class="property-item">
                        <label class="text-xs text-light-300 block mb-1">Gap</label>
                        <input type="number" value="4"
                            class="w-full bg-dark-200 border border-dark-100 rounded-md py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                    </div>

                    <div class="property-item">
                        <label class="text-xs text-light-300 block mb-1">Padding</label>
                        <div class="grid grid-cols-4 gap-2">
                            <input type="text" value="8"
                                class="bg-dark-200 border border-dark-100 rounded-md py-1 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                            <input type="text" value="8"
                                class="bg-dark-200 border border-dark-100 rounded-md py-1 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                            <input type="text" value="8"
                                class="bg-dark-200 border border-dark-100 rounded-md py-1 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                            <input type="text" value="8"
                                class="bg-dark-200 border border-dark-100 rounded-md py-1 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                        </div>
                    </div>
                </div>

                <!-- 背景属性 -->
                <div class="panel-section">
                    <h3 class="font-medium text-sm text-light-300 mb-3">Background</h3>

                    <div class="property-item">
                        <label class="text-xs text-light-300 block mb-1">Type</label>
                        <select
                            class="w-full bg-dark-200 border border-dark-100 rounded-md py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                            <option>Gradient</option>
                            <option>Solid</option>
                            <option>Image</option>
                            <option>None</option>
                        </select>
                    </div>

                    <div class="property-item">
                        <label class="text-xs text-light-300 block mb-1">From Color</label>
                        <div class="flex items-center space-x-2">
                            <input type="color" value="#3B82F6" class="w-8 h-8 p-0 border-0 rounded bg-transparent">
                            <input type="text" value="#3B82F6"
                                class="flex-1 bg-dark-200 border border-dark-100 rounded-md py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                        </div>
                    </div>

                    <div class="property-item">
                        <label class="text-xs text-light-300 block mb-1">To Color</label>
                        <div class="flex items-center space-x-2">
                            <input type="color" value="#10B981" class="w-8 h-8 p-0 border-0 rounded bg-transparent">
                            <input type="text" value="#10B981"
                                class="flex-1 bg-dark-200 border border-dark-100 rounded-md py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                        </div>
                    </div>

                    <div class="property-item">
                        <label class="text-xs text-light-300 block mb-1">Opacity</label>
                        <input type="range" min="0" max="100" value="20" class="w-full accent-primary">
                    </div>
                </div>

                <!-- 边框属性 -->
                <div class="panel-section">
                    <h3 class="font-medium text-sm text-light-300 mb-3">Border</h3>

                    <div class="property-item">
                        <label class="text-xs text-light-300 block mb-1">Radius</label>
                        <input type="text" value="xl"
                            class="w-full bg-dark-200 border border-dark-100 rounded-md py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                    </div>

                    <div class="property-item">
                        <label class="text-xs text-light-300 block mb-1">Width</label>
                        <input type="number" value="0"
                            class="w-full bg-dark-200 border border-dark-100 rounded-md py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                    </div>

                    <div class="property-item">
                        <label class="text-xs text-light-300 block mb-1">Style</label>
                        <select
                            class="w-full bg-dark-200 border border-dark-100 rounded-md py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
                            <option>None</option>
                            <option>Solid</option>
                            <option>Dashed</option>
                            <option>Dotted</option>
                        </select>
                    </div>
                </div>
            </div>
        </aside>
    </main>

    <!-- 通知提示 -->
    <div id="notification"
        class="fixed bottom-4 right-4 bg-dark-300 border border-dark-100 rounded-lg shadow-lg p-4 max-w-xs transform translate-y-0 opacity-100 transition-all duration-300">
        <div class="flex items-start">
            <div class="flex-shrink-0 mt-0.5">
                <i class="fa fa-check-circle text-secondary"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium text-light-100">Canvas fixed</p>
                <p class="text-xs text-light-300 mt-1">Scrolling to top has been fixed</p>
            </div>
            <button class="ml-auto flex-shrink-0 text-light-300 hover:text-light-100">
                <i class="fa fa-times text-xs"></i>
            </button>
        </div>
    </div>

    <script>
        // 实现组件拖拽功能
        document.addEventListener('DOMContentLoaded', () => {
            // 获取所有可拖拽的组件
            const draggableComponents = document.querySelectorAll('.component-hover');
            const canvas = document.getElementById('canvas');

            // 为每个组件添加拖拽事件
            draggableComponents.forEach(component => {
                component.setAttribute('draggable', 'true');

                component.addEventListener('dragstart', (e) => {
                    // 设置拖拽数据
                    const componentName = component.querySelector('div:first-child').textContent;
                    e.dataTransfer.setData('text/plain', componentName);

                    // 添加拖拽时的视觉效果
                    setTimeout(() => {
                        component.classList.add('opacity-50');
                    }, 0);
                });

                component.addEventListener('dragend', () => {
                    // 移除拖拽时的视觉效果
                    component.classList.remove('opacity-50');
                });
            });

            // 为画布添加拖放事件
            canvas.addEventListener('dragover', (e) => {
                e.preventDefault();
                canvas.classList.add('border-primary/50');
            });

            canvas.addEventListener('dragleave', () => {
                canvas.classList.remove('border-primary/50');
            });

            canvas.addEventListener('drop', (e) => {
                e.preventDefault();
                canvas.classList.remove('border-primary/50');

                // 获取拖拽的组件名称
                const componentName = e.dataTransfer.getData('text/plain');

                // 根据组件名称创建相应的元素
                let newComponent;

                switch (componentName) {
                    case 'Hero Section':
                        newComponent = createHeroSection();
                        break;
                    case 'Feature Section':
                        newComponent = createFeatureSection();
                        break;
                    case 'Editor Section':
                        newComponent = createEditorSection();
                        break;
                    case 'Text Input':
                        newComponent = createTextInput();
                        break;
                    case 'Button':
                        newComponent = createButton();
                        break;
                    default:
                        newComponent = createDefaultComponent(componentName);
                }

                // 将新组件添加到画布
                if (newComponent) {
                    // 找到最后一个子元素（拖放区域提示）并在其前面插入
                    const dropZone = canvas.lastElementChild;
                    canvas.insertBefore(newComponent, dropZone);

                    // 显示通知
                    showNotification(`Added ${componentName}`);
                }
            });

            // 画布中的元素点击选中事件
            canvas.addEventListener('click', (e) => {
                // 查找最接近的组件容器
                const component = e.target.closest('#hero-section, #feature-section, .custom-component');
                if (component) {
                    // 移除所有选中状态
                    document.querySelectorAll('#hero-section, #feature-section, .custom-component').forEach(el => {
                        el.classList.remove('border-primary');
                        el.classList.add('border-transparent');
                    });

                    // 添加选中状态
                    component.classList.remove('border-transparent');
                    component.classList.add('border-primary');

                    // 更新右侧属性面板标题
                    const componentTitle = component.dataset.name || component.id.replace('-section', ' Section');
                    document.querySelector('aside:last-child h3.font-medium').textContent = componentTitle;
                }
            });

            // 关闭通知
            document.querySelector('#notification button').addEventListener('click', () => {
                hideNotification();
            });

            // 5秒后自动隐藏通知
            setTimeout(hideNotification, 5000);
        });

        // 隐藏通知
        function hideNotification() {
            const notification = document.getElementById('notification');
            notification.classList.add('translate-y-20', 'opacity-0');
            setTimeout(() => {
                notification.style.display = 'none';
            }, 300);
        }

        // 显示通知
        function showNotification(message) {
            const notification = document.getElementById('notification');
            notification.style.display = 'block';
            notification.querySelector('p:first-child').textContent = message;
            notification.classList.remove('translate-y-20', 'opacity-0');

            // 5秒后自动隐藏
            setTimeout(hideNotification, 5000);
        }

        // 创建组件函数
        function createHeroSection() {
            const div = document.createElement('div');
            div.id = 'hero-section-clone';
            div.className = 'bg-gradient-to-r from-primary/20 to-secondary/20 rounded-xl p-8 mb-8 border-2 border-dashed border-transparent hover:border-primary/50 transition-colors cursor-pointer custom-component';
            div.dataset.name = 'Hero Section';

            div.innerHTML = `
                <div class="max-w-3xl mx-auto text-center">
                    <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 text-light-100">Create amazing UIs with Flowbite</h2>
                    <p class="text-xl text-light-300 mb-8">Build beautiful, responsive interfaces with our comprehensive UI component library.</p>
                    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                        <button class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors w-full sm:w-auto">Get Started</button>
                        <button class="bg-dark-200 hover:bg-dark-100 text-light-100 font-medium py-3 px-6 rounded-lg transition-colors w-full sm:w-auto">View Components</button>
                    </div>
                </div>
            `;

            return div;
        }

        function createFeatureSection() {
            const div = document.createElement('div');
            div.className = 'bg-dark-200/50 rounded-xl p-8 mb-8 border-2 border-dashed border-transparent hover:border-primary/50 transition-colors cursor-pointer custom-component';
            div.dataset.name = 'Feature Section';

            div.innerHTML = `
                <h2 class="text-2xl font-bold mb-6 text-center text-light-100">Powerful Features</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-dark-300 p-6 rounded-lg">
                        <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                            <i class="fa fa-code text-primary text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-light-100">Ready to Use</h3>
                        <p class="text-light-300 text-sm">Components come with clean, production-ready code that's easy to integrate.</p>
                    </div>
                    <div class="bg-dark-300 p-6 rounded-lg">
                        <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                            <i class="fa fa-paint-brush text-primary text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-light-100">Customizable</h3>
                        <p class="text-light-300 text-sm">Easily adjust colors, sizes, and styles to match your brand identity.</p>
                    </div>
                    <div class="bg-dark-300 p-6 rounded-lg">
                        <div class="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
                            <i class="fa fa-mobile text-primary text-xl"></i>
                        </div>
                        <h3 class="text-lg font-semibold mb-2 text-light-100">Responsive</h3>
                        <p class="text-light-300 text-sm">Perfectly adapts to any screen size, from mobile to desktop.</p>
                    </div>
                </div>
            `;

            return div;
        }

        function createEditorSection() {
            const div = document.createElement('div');
            div.className = 'bg-dark-200/50 rounded-xl p-8 mb-8 border-2 border-dashed border-transparent hover:border-primary/50 transition-colors cursor-pointer custom-component';
            div.dataset.name = 'Editor Section';

            div.innerHTML = `
                <h2 class="text-2xl font-bold mb-6 text-center text-light-100">Code Editor</h2>
                <div class="bg-dark-400 rounded-lg p-4 font-mono text-sm">
                    <div class="flex items-center border-b border-dark-100 pb-2 mb-2">
                        <div class="flex space-x-2 mr-4">
                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
                        </div>
                        <div class="text-xs text-light-300">App.jsx</div>
                    </div>
                    <pre class="text-light-300 leading-relaxed text-xs"><code>function App() {
  return (
    &lt;div className="min-h-screen bg-dark-400"&gt;
      &lt;Header /&gt;
      &lt;main&gt;
        &lt;HeroSection /&gt;
        &lt;FeatureSection /&gt;
      &lt;/main&gt;
      &lt;Footer /&gt;
    &lt;/div&gt;
  );
}</code></pre>
                </div>
            `;

            return div;
        }

        function createTextInput() {
            const div = document.createElement('div');
            div.className = 'mb-4 p-4 bg-dark-200/30 rounded-lg border-2 border-dashed border-transparent hover:border-primary/50 transition-colors cursor-pointer custom-component';
            div.dataset.name = 'Text Input';

            div.innerHTML = `
                <label class="block text-sm font-medium text-light-300 mb-1">Email address</label>
                <input type="email" placeholder="name@example.com" class="w-full bg-dark-300 border border-dark-100 rounded-md py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary text-light-100">
            `;

            return div;
        }

        function createButton() {
            const div = document.createElement('div');
            div.className = 'mb-4 p-4 bg-dark-200/30 rounded-lg border-2 border-dashed border-transparent hover:border-primary/50 transition-colors cursor-pointer custom-component';
            div.dataset.name = 'Button';

            div.innerHTML = `
                <button class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-colors">
                    Click me
                </button>
            `;

            return div;
        }

        function createDefaultComponent(name) {
            const div = document.createElement('div');
            div.className = 'p-6 mb-8 bg-dark-200/50 rounded-xl border-2 border-dashed border-transparent hover:border-primary/50 transition-colors cursor-pointer custom-component';
            div.dataset.name = name;

            div.innerHTML = `
                <h3 class="text-lg font-medium text-light-100 mb-2">${name}</h3>
                <p class="text-light-300 text-sm">Customizable component ready to use in your design.</p>
            `;

            return div;
        }
    </script>
</body>

</html>